<template>
    <el-aside class='editor-right-panel' width='500px'>
      <div v-if="currentElementProps.length">
        <div class="attr-title marginB10 fontBold">组件属性</div>
        <el-form>
          <component
            v-for="item in currentElementProps"
            :key="item" :is="'attr-props-' + item"
            v-bind.sync="activeElement.propsValue"
          />
        </el-form>
      </div>
    </el-aside>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import attrComponents from './attr-config/props-attr';

console.log('attrComponents', attrComponents);
export default {
  name: 'editRightPanel',
  components: {
    ...attrComponents,
  },
  data() {
    return {
      textarea: '',
    };
  },
  computed: {
    ...mapState({
      elementType: (state) => state.editor.editorActiveElement.elType,
      elementUid: (state) => state.editor.editorActiveElement.uuid,
    }),
    ...mapGetters([
      'activeElement',
    ]),
    /**
     * 当前选中元素需要编辑得props 列表
     */
    currentElementProps() {
      if (!this.activeElement || !this.activeElement.propsValue) {
        return [];
      }
      let keyList = Object.keys(this.activeElement.propsValue);
      const editPropsComponentNameList = Object.keys(attrComponents);
      // 过滤掉找不到对应attr props编辑组件的key
      keyList = keyList.filter((v) => editPropsComponentNameList.includes(`attr-props-${v}`));
      return keyList;
    },
  },
  methods: {
  },
};
</script>

<style scoped>

</style>
